<template>
	<view>
		<fa-navbar title="我的技能培训订单"></fa-navbar>
		<view class="content">
			<view class="search">
				<u-search height="68" searchIconSize="44" :clearabled="true" bgColor="#ffffff" margin="34rpx 0"
					shape="round" placeholder="请输入技能培训关键词" :showAction="false" v-model="keyword" @search="searchKeyword"
					@clear="searchKeyword"></u-search>
			</view>
			<view class="jnpx">
				<view class="category">
					<u-tabs :list="statusList" lineHeight="8" lineWidth="40" keyName="name" :current="current"
						lineColor="#0052D9"
						:activeStyle="{'fontWeight':'bold',transform: 'scale(1.05)','font-size':'32rpx','color':'#000000'}"
						:inactiveStyle="{'color':'#333333','font-size':'30rpx'}"
						:itemStyle="{'padding-left':'0rpx','height':'88rpx'}" @click="clickCategory">
					</u-tabs>
				</view>
				<view class="classes">
					<fa-training-item :classesList="classesList" :type="'my'" @goPay="goPay"></fa-training-item>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view class="u-p-b-30 u-m-t-30" v-if="classesList.length">
			<u-loadmore bg-color="#f4f6f8" fontSize="28" :line="true" :status="has_more ? status : 'nomore'" />
		</view>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!classesList.length">
			<u-empty textSize="28" mode="data"></u-empty>
		</view>
		<!-- 支付 -->
		<fa-payment ref="faPayment" source="vip" :title="title" :subtitle="subtitle" :money="money" :params="{'order_sn' : paysn}" @paySuccess="paySuccess"></fa-payment>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				statusList:[{
					name:"全部"
				},{
					name:"待审核"
				},{
					name:"审核通过"
				},{
					name:"审核不通过"
				},{
					name:"已支付"
				},{
					name:"待支付"
				}],
				classesList:[],
				keyword: '',
				page: 1,
				has_more: true,
				status:0,
				title:'支付提示',
				subtitle:'',
				money:0,
				paysn:''
			};
		},
		onLoad() {
			this.getClassesList()
		},
		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				this.getClassesList();
			}
		},
		methods:{
			goPay(item){
				this.subtitle =item.classes.name
				this.money = item.classes.regprice
				this.paysn = item.paysn
				this.$refs.faPayment.show();
			},
			clickCategory(e){
				this.status = e.index
				this.page = 1;
				this.getClassesList()
			},
			searchKeyword() {
				this.page = 1;
				this.getClassesList()
			},
			getClassesList() {
				this.$api.getMyClassesOrder({params:{page:this.page,keyword:this.keyword,status:this.status}}).then((res)=>{
					if(res.code){
						if (this.page === 1) {
							this.classesList = [];
						}
						let classesList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.classesList = [...this.classesList, ...classesList];
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 188rpx 24rpx 0 24rpx;
	}
	.classes{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.items{
			margin-top: 24rpx;
			.info{
				background-color: #ffffff;
				border-radius: 0 0 20rpx 20rpx;
				padding: 24rpx;
				.title{
					width: 291rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					margin-bottom: 16rpx;
				}
				.kbsj{
					display: flex;
					align-items: center;
					text{
						margin-left: 16rpx;
						color: #999999;
						font-size: 24rpx;
					}
				}
				.bmxx{
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					text{
						margin-left: 16rpx;
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
